<template>
  <div>
    <Button type="primary" class="back-button" @click="$router.go(-1)" icon="md-arrow-back">返回上一级</Button>
    <Card>
      <div class="m-t-sm m-b-sm p-detail">赛事信息</div>
      <Row class="m-lg p-w-m m-t-md">
        <span class="p-title">竞赛规程名称：</span>
        <span>{{container.matchName}}</span>
      </Row>
      <Row class="m-lg p-w-m">
        <Col span="8" v-if="container.kindCode">
          <span class="p-title">赛事类型：</span>
          <dict-span code="ZGX_SSDJ" :value="container.kindCode"></dict-span>
        </Col>
        <Col span="8">
          <span class="p-title">参赛名额：</span>
          <span>{{container.entryQuota || 0}}人</span>
        </Col>
        <Col span="8">
          <span class="p-title">报名人数：</span>
          <span>{{container.countNum || 0}}人</span>
        </Col>
      </Row>
      <Row class="m-lg p-w-m">
        <Col span="8">
          <span class="p-title">参赛时间：</span>
          <span v-text="$moment(container.startTime).format('YYYY-MM-DD')"></span>
          <span>至</span>
          <span v-text="$moment(container.endTime).format('YYYY-MM-DD')"></span>
        </Col>
        <Col span="8">
          <Button type="success" ghost @click="list()">查看报名表</Button>
        </Col>
      </Row>
      <div class="m-t-sm m-b-sm p-detail">竞赛规程详情</div>
      <template v-if="urlArr.length >0">
        <div v-for="(item,index) in urlArr" :key="index">
          <div style="line-height: 40px;cursor: pointer;color: #1e88e5" @click="clickItem(item)">{{item.name}}</div>
        </div>
      </template>
      <Card style="height: calc(100vh - 550px)">
        <span v-html="$config.decodeHtml(container.content)"></span>
      </Card>
    </Card>
  </div>
</template>
<script>
  import { getOne } from '@/api/applets';
  import dictSpan from '_c/dict/dict-span.vue';
  import pdfModel from '@/components/pdfModel/pdfModel.vue';
  export default {
    components: {
      dictSpan,
      pdfModel
    },
    data() {
      return {
        container:{},
        urlArr:[],
        isShow:false,
        content:{},
        type: this.$route.params.type
      }
    },
    mounted() {
        this.query();
    },
    methods: {
      query() {
        getOne({matchId: this.$route.params.id})
          .then(res => {
            this.container = res;
            let pdf = this.container.attachmentName?this.$config.getKey(this.container.attachmentName,'name'):null;
            let pdfUrl = this.container.attachment?this.$config.getKey(this.container.attachment,'url'):null;
            if(pdfUrl) {
              this.urlArr = pdfUrl.map((item,index) => {
                return {...item, ...pdf[index]};
              });
            }
          })
      },
      list() {
        // this.$router.push(`management-detail/${this.type}/` + this.container.matchId)
        this.$router.push({
          name:this.type === 'money'?`management-money-detail`:'management-suspension-detail',
          params:{
            type: this.type,
            id:this.container.matchId
          }
        })
      },
      clickItem(file) {
        let link = document.createElement('a');
        link.href = file.url;
        link.download = file.name;
        link.click();
      },
      cancel(status) {
        this.isShow = status;
      }
    }
  };
</script>
<style scoped>
  .p-detail {
    border: 1px dashed #219df0;
    background: white;
    width: 120px;
    padding: 10px;
    text-align: center;
    color: #219df0;
    font-weight: bold;
    border-radius: 5px;
  }
  .pdfModel > .ivu-modal {
    top: 60px !important;
  }
  .p-title{
    font-weight: bold;
  }
</style>
